<template>
	<div class="content">
		<div class="content-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>
					<b>用户管理</b>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-body">
			<el-scrollbar>
				<div class="panel">
					<el-form :model="sysUserForm" ref="sysUserForm" inline label-width="100px">
						<el-row>
							<el-col :md="8">
								<el-form-item label="用户名">
									<el-input v-model="sysUserForm.uname" maxlength="50"></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="姓名">
									<el-input v-model="sysUserForm.fullName" maxlength="50"></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="电话">
									<el-input v-model="sysUserForm.phone" maxlength="20"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="search-btn">
							<div class="search-btn-left">
								<el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
								<el-button v-auth="'export'" icon="el-icon-download" @click="exportExcel" style="margin-right: 10px;">导出</el-button>
								<el-button v-auth="'export'" icon="el-icon-download" @click="downloadTemplate" style="margin-right: 10px;">模板下载</el-button>
								<el-upload :show-file-list="false" action :http-request="importExcel">
									<el-button v-auth="'export'" icon="el-icon-upload2">导入</el-button>
								</el-upload>
							</div>
							<div class="search-btn-right">
								<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
								<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
							</div>
						</div>
					</el-form>
					<el-table :data="tableData" border stripe style="width: 100%">
						<el-table-column label="序号" width="60" header-align="center" align="center">
							<template
								slot-scope="scope">{{scope.$index + 1 + (tableCurrentPage-1)*tablePageSize}}</template>
						</el-table-column>
						<el-table-column prop="uname" label="用户名"></el-table-column>
						<el-table-column prop="fullName" label="姓名"></el-table-column>
						<el-table-column prop="roleNames" label="角色">
							<template slot-scope="scope" v-if="scope.row.roleNames">
								<el-tag type="info" v-for="(role, index) in scope.row.roleNames.split(',')" :key="index"
									style="margin-right: 10px;">{{role}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="phone" label="电话"></el-table-column>
						<el-table-column prop="email" label="邮箱"></el-table-column>
						<el-table-column label="操作" min-width="240px">
							<template slot-scope="scope">
								<el-button type="warning" @click="handleUpdate(scope.row.id)"
									:disabled="scope.row.admin">编辑</el-button>
								<el-button @click="resetPwd(scope.row.id)" :disabled="scope.row.admin">重置密码</el-button>
								<el-button type="danger" @click="handleDelete(scope.row.id)"
									:disabled="scope.row.admin">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="tableCurrentPage" :page-sizes="[10, 20, 30, 50]"
						:page-size.sync="tablePageSize" layout="total, jumper, prev, pager, next, sizes"
						:total="tableTotal"></el-pagination>
				</div>
			</el-scrollbar>
			<SysUser ref="sysUser"></SysUser>
		</div>
	</div>
</template>

<script>
	import SysUser from "./SysUser";
	export default {
		components: {
			SysUser
		},
		data() {
			return {
				sysUserForm: {
					uname: "",
					fullName: "",
					phone: ""
				},
				tableTotal: 0,
				tableCurrentPage: 1,
				tablePageSize: 10,
				tableData: []
			};
		},
		mounted() {
			this.getTableData(this.tableCurrentPage, this.tablePageSize);
		},
		methods: {
			handleSizeChange(val) {
				this.getTableData(this.tableCurrentPage, val);
			},
			handleCurrentChange(val) {
				this.getTableData(val, this.tablePageSize);
			},
			handleSearch() {
				this.getTableData(this.tableCurrentPage, this.tablePageSize);
			},
			getTableData(page, pageSize) {

				let pageParams = '?page=' + page + '&rows=' + pageSize;

				this.$api.post('/user/findByPage' + pageParams, this.sysUserForm).then(
					response => {
						this.tableData = response.data.list;
						this.tableTotal = response.data.total;
					}
				);
			},
			resetForm() {
				this.sysUserForm = {
					uname: "",
					fullName: "",
					phone: ""
				};
				this.getTableData(1, this.tablePageSize);
			},
			handleAdd() {
				this.$refs.sysUser.initForm();
			},
			handleUpdate(id) {
				this.$refs.sysUser.initForm(id);
			},
			handleDelete(id) {
				this.$confirm("确认删除?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$api.post('/user/delete', {id:id}).then(response => {
							this.$message.success(response.message);
							this.handleSearch();
						});
					})
					.catch(() => {});
			},
			resetPwd(id) {
				this.$confirm("确认重置密码?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$api.post('/user/resetPwd', {id:id}).then(response => {
							this.$message.success(response.message);
						});
					})
					.catch(() => {});
			},
			exportExcel() {
				this.$api.download('/user/exportExcel', this.sysUserForm).then(
					response => {
						const blob = new Blob([response], {type: 'application/vnd.ms-excel'})
						const a = document.createElement('a')
						const href = window.URL.createObjectURL(blob)
						a.href = href
						a.download = '用户信息'
						document.body.appendChild(a)
						a.click()
						document.body.removeChild(a)
						window.URL.revokeObjectURL(href)
					}
				);
			},
			downloadTemplate() {
				this.$api.download('/user/downloadTemplate').then(
					response => {
						const blob = new Blob([response], {type: 'application/vnd.ms-excel'})
						const a = document.createElement('a')
						const href = window.URL.createObjectURL(blob)
						a.href = href
						a.download = '用户导入模板'
						document.body.appendChild(a)
						a.click()
						document.body.removeChild(a)
						window.URL.revokeObjectURL(href)
					}
				);
			},
			importExcel(e) {
				if (e.file) {
					let params = {
						file: e.file
					};
					this.$api.fileUpload('/user/importExcel', params).then(res => {
						this.$message.success(res.message)
						this.handleSearch();
					}).catch(err => {
						this.$message.error(err.message)
					})
				}
				
			}
		}
	};
</script>
